<template>
    <!-- 查询和操作区域 -->
    <div class="page-header">
        <div class="toolbar">
            <el-button v-permission="'sys:permission:create'" type="primary" @click="handleCreate">新增</el-button>
            <el-button v-permission="'sys:permission:read'" type="info" @click="init">刷新</el-button>
        </div>
    </div>
    <!-- 表格区域 -->
    <div class="page-main">
        <el-table :data="tableData" style="width: 100%" stripe max-height="calc(100vh - 140px)" row-key="id"
            default-expand-all>
            <el-table-column fixed prop="title" label="名称" width="150" />
            <el-table-column align="center" fixed label="类型" width="70">
                <template #default="{ row }">
                    <el-tag effect="dark" :type="row.type === 'C' ? 'primary' : row.type === 'M' ? 'success' : 'info'"
                        disable-transitions>
                        {{ row.type === 'C' ? '目录' : row.type === 'M' ? '页面' : '按钮' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed prop="permissionCode" label="权限标识" width="200" />
            <el-table-column align="center" prop="path" label="路径" width="240" />
            <el-table-column align="center" prop="componentName" label="组件名" width="150" />
            <el-table-column align="center" prop="componentPath" label="组件路径" width="180" />
            <el-table-column align="center" prop="orderId" label="排序" width="60" />
            <el-table-column align="center" label="图标" width="80">
                <template #default="{ row }">
                    <el-icon>
                        <component :is="row.icon"></component>
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column align="center" label="隐藏" width="70">
                <template #default="{ row }">
                    <el-tag effect="light" :type="row.hidden ? 'info' : 'success'" disable-transitions>
                        {{ row.hidden ? '隐藏' : '显示' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" width="70">
                <template #default="{ row }">
                    <el-tag effect="light" :type="row.disable ? 'info' : 'success'" disable-transitions>
                        {{ row.disable ? '禁用' : '可用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="缓存" width="70">
                <template #default="{ row }">
                    <el-tag v-if="row.keepAlive" effect="light" type="success" disable-transitions>
                        {{ '缓存' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" min-width="250">
                <template #default="{ row }">
                    <el-button v-if="row.type != 'B'" v-permission="'sys:permission:create'" type="primary" size="small"
                        @click="handleCreate(row)">新增下级</el-button>
                    <el-button v-permission="'sys:permission:update'" type="success" size="small"
                        @click="handleUpdate(row)">编辑</el-button>
                    <el-button v-permission="'sys:permission:delete'" type="danger" size="small"
                        @click="">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 新增和编辑窗口 -->
    <el-drawer v-model="drawerVisible" direction="rtl" class="demo-drawer" size="30%" :close-on-click-modal="false"
        :show-close="false" :close-on-press-escape="false">
        <template #header>
            <h4>{{ formData.id ? '编辑数据' : '新增数据' }}</h4>
        </template>
        <template #default>
            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto" center>

                <el-form-item label="权限类型" prop="type">
                    <el-radio-group v-model="formData.type">
                        <el-radio-button label="目录" value="C" />
                        <el-radio-button label="页面" value="M" />
                        <el-radio-button label="按钮" value="B" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="名称" prop="title">
                    <el-input v-model="formData.title"/>
                </el-form-item>
                <el-form-item label="权限编码" prop="permissionCode">
                    <el-input v-model="formData.permissionCode" />
                </el-form-item>
                <el-form-item label="父级" prop="pid">
                    <el-tree-select v-model="formData.pid" :props="props" :data="tableData" node-key="id" check-strictly
                        :render-after-expand="false" default-expand-all clearable />
                </el-form-item>
                <el-form-item label="排序" prop="orderId">
                    <el-input v-model="formData.orderId" />
                </el-form-item>
                <el-form-item v-if="formData.type != 'B'" label="路径" prop="path">
                    <el-input v-model="formData.path" />
                </el-form-item>
                <el-form-item v-if="formData.type != 'B'" label="图标" prop="icon">
                    <el-input v-model="formData.icon" />
                </el-form-item>
                <el-form-item v-if="formData.type != 'B'" label="隐藏" prop="hidden">
                    <el-switch v-model="formData.hidden" :active-value="1" :inactive-value="0" />
                </el-form-item>
                <el-form-item v-if="formData.type != 'B'" label="禁用" prop="disable">
                    <el-switch v-model="formData.disable" :active-value="1" :inactive-value="0" />
                </el-form-item>
                <el-form-item v-if="formData.type == 'M'" label="组件路径" prop="componentPath">
                    <el-input v-model="formData.componentPath" />
                </el-form-item>
                <el-form-item v-if="formData.type == 'M'" label="组件名称" prop="componentName">
                    <el-input v-model="formData.componentName" />
                </el-form-item>
                <el-form-item v-if="formData.type == 'M'" label="缓存" prop="keepAlive">
                    <el-switch v-model="formData.keepAlive" :active-value="1" :inactive-value="0" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="confirmClick">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { get,post } from '@/utils/request'
import { onMounted, ref, reactive } from 'vue'

const props = {
    label: 'title',
    children: 'children',
}

//表格数据
const tableData = ref([])
//表格标签
const formRef = ref(null)
//新增、编辑弹窗
const drawerVisible = ref(false)

//表单数据结构
const formData = ref({
    id: 0,
    title: '',
    type: '',
    pid: 0,
    permissionCode: '',
    path: '',
    componentPath: '',
    componentName: '',
    icon: '',
    keepAlive: 0,
    hidden: 0,
    disable: 0,
    orderId: 0
})

//表单校验规则
const formRules = reactive({
    title: [
        { required: true, message: '请输入内容', trigger: 'blur' }
    ],
    permissionCode: [
        { required: true, message: '请输入内容', trigger: 'blur' }
    ],
    path: [
        { required: true, message: '请输入内容', trigger: 'blur' }
    ],
    icon: [
        { required: true, message: '请输入内容', trigger: 'blur' }
    ],
    componentPath: [
        { required: true, message: '请输入内容', trigger: 'blur' }
    ],
    componentName: [
        { required: true, message: '请输入内容', trigger: 'blur' }
    ],
})

//页面挂在完毕，执行初始化方法
onMounted(() => {
    init()
})

//页面初始化方案
const init = async () => {
    const loadingInstance = ElLoading.service({
        target: document.querySelector('.page-main'),
        fullscreen: false,
        lock: true,
        text: '加载中...'
    })
    const res = await get('sysPermission/getSysPermissionList')
    loadingInstance.close()
    tableData.value = res.data
}

//新增弹窗
const handleCreate = (row) => {
    drawerVisible.value = true
    formData.value = {
        type: 'C',
        pid: row.id
    }
}

//编辑弹窗
const handleUpdate = (row) => {
    drawerVisible.value = true
    formData.value = JSON.parse(JSON.stringify(row))
    if (row.pid == 0) {
        formData.value.pid = ''
    }
}

//保存数据
const confirmClick = async () => {
    await formRef.value.validate(async (valid) => {
        if (valid) {
            const url = formData.value.id ? 'sysPermission/updateSysPermissionById' : 'sysPermission/createSysPermission'
            await post(url, formData.value)
            ElMessage.success('保存成功')
            drawerVisible.value = false
            init()
        }
    })
}

//新增或编辑窗口取消保存
const cancelClick = () => {
    drawerVisible.value = false
    formRef.value.resetFields()
}

</script>

<style lang="less" scoped>
.page-header {
    height: 50px;
    display: flex;
}
</style>
